<template>
  <template
    v-for="(item, index) in subMenu"
  >
    <!--树枝-->
    <template v-if="item.children && item.children.length > 0">
      <el-sub-menu 
        :key="item.menuId + '_' + index"
        :index="item.menuId"
      >
        <template #title>
          <component
            :is="$icon[item.icon]"
            style="width: 1.5em; height: 1.5em; margin-right: 8px;"
          >
          </component>
          <span>{{item.text}}</span> 
        </template>
        <!--递归子菜单-->
        <my-sub-menu2
          :current="current"
          :subMenu="item.children"
        />
      </el-sub-menu>
    </template>
    <!--树叶-->
    <el-menu-item v-else
      :index="item.menuId"
    >
      <template #title>
        <el-icon>
        <component
          :is="$icon[item.icon]"
          style="width: 1.5em; height: 1.5em; margin-right: 8px;"
        >
        </component></el-icon>
        <span >{{item.text}}</span>  
      </template>
    </el-menu-item>
  </template>
</template>


<script>
  import { ElMenuItem, ElSubMenu } from 'element-plus'
  // 展示子菜单 - 递归
  import mySubMenu2 from './menu-sub.vue'
 
</script>

<script setup>

  const props = defineProps({
    current: Object, // 当前状态
    subMenu: Array // 要显示的菜单，可以n级
  })

</script>